<template>
    <div class="header-top">
        <div class="left">
            <h6>管理系统</h6>
        </div>
        <div class="right">
            <div class="user-icon"><i class="fa fa-user" aria-hidden="true"></i></div>
            <div class="username">
                <el-dropdown trigger="click" @command="handleClick">
                    <span class="el-dropdown-link">
                        {{userInfo.loginName}} <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="fa fa-power-off" :command="{type:'logout'}">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
    data(){
        return {}
    },
    computed:{
        ...mapState(['userInfo']),
    },
    mounted() {

    },
    methods:{
        // 点击回调
        handleClick(e){
            if(e.type == 'logout'){
                this.$confirm('确认退出登录吗？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal:false,
                }).then(result => {
                    this.$http.post('/admin/admin/loginOut', {}).then(result => {
                        if(result.code == 200){
                            localStorage.removeItem('userInfo');
                            this.$store.commit('setUserInfo', {});
                            this.$router.push({
                                path:'/login',
                                query:{refersh:window.location},
                            });
                            this.$message.success(result.msg);
                        }else{
                            this.$message.error(result.msg);
                        }
                    });
                });
            }
        },
    }
}
</script>

<style lang="less" scoped>
.header-top{
    height: 3.75rem;
    background:#fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    padding: 0 1.25rem;
    .left{
        display:flex;
        justify-items: center;
        align-items:center;
        img{
            width: 1.75rem;
            height: 1.75rem;
            border-radius:100%;
        }
        h6{
            margin: 0 0 0 1.125rem;
            font-size: 1rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #333333;
        }
    }
    .right{
        display:flex;
        flex-direction:row;
        justify-items:center;
        align-items:center;
        .user-icon{
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            text-align:center;
            background:#EFEFEF;
            border-radius:100%;
            overflow:hidden;
            margin-right: 0.375rem;
            i{
                font-size: 0.8125rem;
                color:#333;
            }
        }
        .username{
            cursor:pointer;
            ::v-deep(.el-dropdown){
                span{
                    font-size: 0.8125rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
            }
        }
    }
}
.el-dropdown-menu{
    padding:0px 0px;
}
</style>
